<!--
 * @Author: 陆成杰
 * @Date: 2022-06-28 09:04:00
 * @LastEditTime: 2022-07-03 13:43:00
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/material-manager/material-children/UploadMaterial.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <el-dialog v-model="dialogFormVisible" title="上传素材" width="900px">
    <el-divider style="margin-top: -30px" />
    <el-button type="primary">新建文件夹</el-button>
    <div style="display: flex">
      <div v-for="(item, index) in state.folder" :key="index" class="folder">
        <div class="folder-img">
          <img src="../../../assets/material/folder.svg" alt="" />
        </div>
        <div>{{ item }}</div>
      </div>
    </div>
    <div style="margin-top: 30px">
      <el-upload
        v-model:file-list="fileList"
        ref="uploadRef"
        class="upload-demo"
        action="http://up-z2.qiniup.com"
        :Authorization="state.Authorization"
        :auto-upload="false"
        method="post"
        :data="state.imgContent"
      >
        <template #trigger>
          <el-button type="primary" :icon="Upload">选择素材</el-button>
        </template>

        <el-button class="ml-3" type="success" @click="submitUpload">
          上传到服务器
        </el-button>

        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="finishUpload">完成</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Upload } from "@element-plus/icons-vue";
import { postFile } from "../../../axios/file";
import { ElMessage, ElMessageBox } from "element-plus";

import type { UploadInstance, UploadUserFile } from "element-plus";
import { useRouter } from "vue-router";
import { getToken } from "../../../axios/material";

const router = useRouter();

const fileList = ref<UploadUserFile[]>([]);
const putFileUrl = ref("");
const dialogFormVisible = <Boolean>ref(false);

const state = reactive({
  folder: ["ikun", "icao"],
  Authorization: "",
  imgContent: { token: "", key: "" },
});

onMounted(() => {
  getHeader();
  // Token();
});

const getHeader = () => {
  state.Authorization = "Bearer" + window.localStorage.getItem("token");
  console.log(state.Authorization);
};

defineExpose({
  dialogFormVisible,
});

// 上传
const uploadRef = ref<UploadInstance>();

const submitUpload = () => {
  const filePath = "BOEDrawPaintings/" + fileList.value[0].name;
  console.log(fileList);

  postFile(filePath).then((res) => {
    console.log(res);
    if (res.code == 200) {
      putFileUrl.value = res.data;
    }
  });
  getToken().then((res) => {
    console.log(res);
    if (res.code == 200) {
      state.imgContent.token = res.data;
    }
  });
  state.imgContent.key = filePath;
  setTimeout(() => {
    uploadRef.value!.submit();
  }, 500);
};

const finishUpload = () => {
  dialogFormVisible.value = false;
  window.location.replace("/material");
};
</script>
<style lang="less" scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.folder {
  text-align: center;
  margin-left: 20px;
  margin-top: 10px;
  &-img img {
    width: 150px;
    height: 150px;
  }
}
.ml-3 {
  margin-left: 20px;
  margin-top: -6px;
}
</style>
